<template>
  <div class="recommend">
    <el-card>
      <div class="title"><h3>火爆推荐</h3></div>
      <ul>
        <li v-for="(item, index) in recommendList" :key="index">
          <div class="imgs"><img :src="item.imgurl" alt="" /></div>
          <div class="goodsname">
            <h4>{{ item.name }}</h4>
            <p>{{ item.content }}</p>
            <span>￥{{ item.price }}</span>
          </div>
        </li>
      </ul>
    </el-card>
  </div>
</template>

<script>
export default {
  name: "myRecommend",
  data() {
    return {
      recommendList: [
        {
          id: 1,
          name: "龙井1号铁罐250g",
          content: "鲜爽甘醇 口粮首选",
          price: "68",
          imgurl: "./images/recommend.jpeg",
        },
        {
          id: 2,
          name: "龙井1号铁罐250g",
          content: "鲜爽甘醇 口粮首选",
          price: "68",
          imgurl: "./images/recommend.jpeg",
        },
        {
          id: 3,
          name: "龙井1号铁罐250g",
          content: "鲜爽甘醇 口粮首选",
          price: "68",
          imgurl: "./images/recommend.jpeg",
        },
        {
          id: 4,
          name: "龙井1号铁罐250g",
          content: "鲜爽甘醇 口粮首选",
          price: "68",
          imgurl: "./images/recommend.jpeg",
        },
        {
          id: 5,
          name: "龙井1号铁罐250g",
          content: "鲜爽甘醇 口粮首选",
          price: "68",
          imgurl: "./images/recommend.jpeg",
        },
      ],
    };
  },
};
</script>

<style lang="less" scoped>
h4 {
  margin-top: 5px;
}
.imgs img {
  margin-top: 0;
  width: 100%;
}
ul li {
  position: relative;
}
.goodsname {
  position: absolute;
  top: 15px;
  right: 30px;
  font-size: 17px;
}
.title {
  text-align: center;
  font-size: 17px;
  h3 {
    padding: 0;
    margin: 0 0 8px 0;
  }
}
span {
  font-size: 23px;
  color: red;
  float: right;
}
</style>